<template>
  <div class="costApplyDetail">
    <group label-width="1rem" label-align="left" gutter="0">
      <cell>
        <span slot="title">科目</span>
        <span slot="child">{{formdata.subjectName}}</span>
      </cell>
      <template v-for="(item,index) in formdata.subjectList">
        <cell :key="index">
          <span slot="title">{{item.label}}</span>
          <span slot="child">{{item.value}}</span>
        </cell>
      </template>
      <cell>
        <span slot="title">报销数量</span>
        <span slot="child">{{formdata.count}}</span>
      </cell>
      <cell>
        <span slot="title">申请金额</span>
        <span slot="child">{{_numberComma(formdata.fillFigure)}}</span>
      </cell>
      <cell>
        <span slot="title">费用说明</span>
        <span slot="child">{{formdata.state}}</span>
      </cell>
      <template v-if="$route.query.type != 1">
        <x-input title="审核金额" @on-blur="getAccount" :is-type="_typeNumber" v-model="formdata.figure"
                 placeholder="¥"></x-input>
        <flexbox>
          <flexbox-item>
            <div class="flexbox-btn">
              <div class="btn-font" :class="this.no&&'btn-active'" @click="spActive(false)">{{'不予批准'}}</div>
            </div>
          </flexbox-item>
          <flexbox-item>
            <div class="flexbox-btn">
              <div class="btn-font" :class="this.yes&&'btn-active'" @click="spActive(true)">{{'确定'}}</div>
            </div>
          </flexbox-item>
        </flexbox>
      </template>
      <template v-if="$route.query.auth == 1&&$route.query.type == 1">
        <cell>
          <span slot="title">审核金额</span>
          <span slot="child">{{_numberComma(formdata.figure||0)}}</span>
        </cell>
        <cell>
          <span slot="title">审核状态</span>
          <span slot="child">{{formdata.status===1?'通过':'不予批准'}}</span>
        </cell>
      </template>
    </group>
  </div>
</template>

<script>
  import {
    Group, XInput, TransferDom, XTextarea, Selector, Cell, Icon, XButton, Flexbox, FlexboxItem, Previewer
  } from 'vux'

  export default {
    name: "costApplyDetail",
    directives: {
      TransferDom
    },
    props: ['formdata'],
    components: {
      Group, XInput, XTextarea, Selector, Cell, Icon, XButton, Flexbox, FlexboxItem, Previewer,
    },
    data() {
      return {
        no: false,
        yes: false,
        isActive: 'isActive',
      }
    },
    created() {
    },
    methods: {
      //验证金额
      getAccount() {
        if (!(parseFloat(this.formdata.figure) >= 0)) {
          this.formdata.figure = 0;
          return;
        }
        if (this.formdata.figure > this.formdata.fillFigure) {
          this.$vux.alert.show({
            title: '提醒',
            content: '您输入的审核金额已超过申请金额,请重新输入！',
            onHide: () => {
              this.formdata.figure = ''
              this.yes = false;
            }
          })
        }
      },
      spActive(_Is) {
        this.yes = _Is;
        this.no = !this.yes;
        if (_Is) {//审核通过
          this.formdata.status = 1;
        } else {//不予报销
          this.formdata.status = 2;
          //不予报销设置报销金额为0
          this.formdata.figure = 0;
        }
      },
    }
  }
</script>

<style lang="less">
  .costApplyDetail {
    .vux-cell-primary{
      flex: 0 0 auto;
    }
    .imgs {
      height: 80px;
      text-align: center;
      position: absolute;
      line-height: 80px;
      left: 0.8rem;
      right: 0;
      top: 0;
      bottom: 0;
      .fa {
        font-size: 17px;
        color: #43A2FE;
      }
    }
    .previewer-img {
      margin-right: 5px;
    }
    .vux-x-input, .vux-x-textarea {
      .weui-cell__bd {
        padding: 2px;
        border: 0.01rem solid #E5E5E5;
        border-radius: 5px;
      }
    }
    .flexbox-btn {
      height: 60px;
      text-align: center;
      padding: 10px;
      .btn-font {
        width: 100px;
        margin: auto auto;
        color: #43A2FE;
        border: 1px solid #43A2FE;
        border-radius: 4px;
        line-height: 24px;
        font-size: 15px;
      }
      .btn-active {
        background: #43A2FE;
        color: #fff;
      }
    }
  }
</style>
